<template>
	<view class="search-input">
		<view class="search-input-content">
			<view class="search-box">
				<view class="search-icon-left">
					<image src="../../../../../../static/images/search.png" alt="" mode="heightFix"></image>
				</view>
				<view class="search-input-body">
					<input type="text" placeholder="请输入想要搜索的'垃圾'">
				</view>
				<view class="search-icon-right">
					<view class="search-icon-right-right search-icon-right-icon" @click="getImage()">
						<image src="../../../../../../static/images/camera.png" alt="" mode="heightFix"></image>
					</view>
					<view class="search-icon-right-left search-icon-right-icon" @click="scancode()">
						<image src="../../../../../../static/images/scan.png" alt="" mode="heightFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const scancode = () =>{
		uni.scanCode({
			success(res) {
				console.log(res);
			}
		})
	}
	
	const getImage = () =>{
		uni.chooseImage({
			count:1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album','camera'], //从相册选择
			success: function (res) {
				console.log(JSON.stringify(res));
			}
		})
	}
</script>

<style lang="scss" scoped>
	uni-image{
		height: 100%;
	}
	.search-input{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		>.search-input-content{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 95%;
			.search-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				width: 100%;
				margin-top: 15rpx;
				border-radius: 40rpx;
				background-color: rgb(224, 224, 244);
				>.search-icon-left{
					height: 60%;
					margin-left: 25rpx;
					>img{
						height: 100%;
					}
				}
				>.search-input-body{
					// margin-left: 15rpx; ;
				}
				
				>.search-icon-right{
					display: flex;
					height: 70%;
					margin-right: 25rpx;
					.search-icon-right-right{
						&:after{
							content: "";
							width:1px;
							height:65%;
							background-color:rgba(0, 0, 0,0.3);
							position:absolute;
							top: 20%;
							right:-8rpx;

						}
					}
					.search-icon-right-left{
						margin-left: 15rpx;
					}
					.search-icon-right-icon{
						position: relative;
						>img{
							height: 100%;
						}
						
					}
				}
			}
		}
		
	}
</style>